<template>
  <div>
    <el-dialog v-model="props.visible" title="巡检单详情" width="50vw" @close="closeDialog">
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="记录单号：">{{ props?.xjdataArr?.patrolId }}</el-descriptions-item>
        <el-descriptions-item label="巡检人员：">{{ props?.xjdataArr?.patrolUserName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :column="1" border>
        <el-descriptions-item label="巡检时间：">{{ props?.xjdataArr?.patrolTime }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="点编号：">{{props?.xjdataArr?.spotNumber}}</el-descriptions-item>
        <el-descriptions-item label="点名称：">{{ props?.xjdataArr?.spotName }}</el-descriptions-item>
        <!-- <el-descriptions-item label="点类型：">{{props?.xjdataArr?.catalogueName}}</el-descriptions-item> -->
        <el-descriptions-item label="巡检路线：">{{props?.xjdataArr?.patrolRoute}}</el-descriptions-item>
        <el-descriptions-item label="分类目录：">{{props?.xjdataArr?.catalogueName}}</el-descriptions-item>
        <el-descriptions-item label="执行情况：">
            <span v-if="props.xjdataArr?.situationResult=='0'">
              <el-tag>待开始</el-tag>
            </span>
            <span v-if="props.xjdataArr?.situationResult=='1'">
              <el-tag type="success">按时完成</el-tag>
            </span>
            <span v-if="props.xjdataArr?.situationResult=='2'"> 
              <el-tag type="warning">尚未完成</el-tag>
            </span>
            <span v-if="props.xjdataArr?.situationResult=='3'">
              <el-tag type="danger">超时漏检</el-tag>
            </span>
        </el-descriptions-item>
        <el-descriptions-item label="计划名称：">{{props?.xjdataArr?.patrolPlan}}</el-descriptions-item>
        <el-descriptions-item label="任务编号：">{{props?.xjdataArr?.taskId}}</el-descriptions-item>
        <el-descriptions-item label="是否合格：">
          <span v-if="props.xjdataArr?.isPass=='0'">
              <el-tag type="success">合格</el-tag>
            </span>
            <span v-if="props.xjdataArr?.isPass=='1'">
              <el-tag type="danger">不合格</el-tag>
            </span>
        </el-descriptions-item>
        <el-descriptions-item label="检查评分：">{{props?.xjdataArr?.score}}</el-descriptions-item>
        <el-descriptions-item label="备注"> {{props?.xjdataArr?.remark}}</el-descriptions-item>
          <!-- <el-descriptions v-for="item in props?.xjdataArr?.inspectSituations" title="" :column="2" border>
            <el-descriptions-item label="项目名称">{{item?.itemsName}}</el-descriptions-item>
            <el-descriptions-item label="项目名称">检查结果</el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item> -->
      </el-descriptions>
      <el-divider>      <p style="font-weight: 400;">检查项目</p></el-divider>
        <el-table
      :data="props?.xjdataArr?.inspectSituations"
      style="width: 100%;margin-bottom: 20px;">
      <el-table-column
        prop="itemsName"
        label="项目名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="result"
        label="检查结果"
        align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="是否合格"
        align="center">
        <template #default="scope">
          <span v-if="scope.row.isPass=='0'">
              <el-tag type="success">合格</el-tag>
            </span>
            <span v-if="scope.row.isPass=='1'">
              <el-tag type="danger">不合格</el-tag>
            </span>
          </template>
      </el-table-column>
      <el-table-column
        prop="score"
        label="评分"
        align="center">
      </el-table-column>
      <el-table-column
        prop=""
        label="现场照片"
        align="center">
        <template #default="scope">
          <el-image 
      v-for="item in scope.row.inspectSituationImgs"
    style="width: 100px; height: 100px;margin-right: 20px;"
    :src="item.imgAddress" 
  >
  </el-image>
          </template>
      </el-table-column>
    </el-table>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const props:any = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  xjdataArr:{
    type:Object
  }
})
const loading = ref(false);
const params = ref({
itemsName: '',
itemsType: '',
isScore: '',
pageNum: 1,
pageSize: 10,
total: 0,
})
const tableRef = ref<any>(null);
const addData = ref<any[]>([]);

watch(
  () => props.visible,
  async (val:any) => {
    if (val) {
      tableRef.value?.clearSelection();
      console.log("dddddddddd",props.xjdataArr)
    }
  },
);

const tableData = ref([]);
const emit = defineEmits(['closeDialog', 'getSelectData']);
const closeDialog = () => {
  emit('closeDialog');
}
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-size: 12px;
}
:deep(.el-table__cell) {
  padding: 0 !important;
}
.resume-label-width :deep(.el-descriptions--medium.is-bordered .el-descriptions-item__cell) {
    width: 159px;
  }
</style>
